https://discord.umbraco.com logo
Join Discord
Powered by
Umbraco 14 Block grid editor customisation
# help-with-umbraco
m
Hello friends, i am trying to render the content that is inside of the block grid within the preview. https://umbraco.com/blog/deep-dive-block-grid-editor-part-1/ i am following the above, but i cant seem to get the content displaying correctly. i know the tutoiral is for umb 11 so im wondering if it needs to be done differently for umb14? in an ideal world, i just want the editor view to provide a good idea of how the front end will be laid out. can anyone help? https://cdn.discordapp.com/attachments/1267426827073355826/1267426827316494368/image.png?ex=66a8beb7&is=66a76d37&hm=44234f1c03afab661ad15f4ba0b03c1d43e227f4a31cb2457f9ed077fc454518& https://cdn.discordapp.com/attachments/1267426827073355826/1267426827685597238/image.png?ex=66a8beb7&is=66a76d37&hm=236ad2fb9b76bae9e7b2d112993e87b7bb8acbc3941c640efd0230542d838b24& https://cdn.discordapp.com/attachments/1267426827073355826/1267426828021399604/image.png?ex=66a8beb7&is=66a76d37&hm=0d5f7500071e61f4aac85821b96644f5f3b79d2d98652b9caba664de32f39066&
I noticed the docs also mention angular-js but i thought umb14 stopped using angular!
m
Correct 14 doesnt have angular šŸ™‚ your best best is probably the docs and community blogs on 14 - https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist
Although looking at that page its still angularJS looks like its not been updated
r
Custom Views for Blocks will not be fully supported until v14.2 (due 22nd August) and will have to be Web Components rather than Angular. My package BlockPreview will be released the same day as 14.2 to support custom previews based on Razor views https://marketplace.umbraco.com/package/umbraco.community.blockpreview
m
thanks for that!, the link you've pinged across is for block list. Like you said it still mentions about angular, so worried this may not work either!
Nice man! annoyingly I dont think i can wait lol i need to get something displaying in that editor view..asap (you know how it is) so help me understand your message. when you say custom views are not fully supported. does that mean what i am trying to do will not work?
r
If you were to try and enable a Custom View right now by registering a manifest to use the 
blockEditorCustomView
extension slot, you wouldn't have control over whether it appears in Block Grid or Block List, or which doctype it appears against
m
just a side note, following that tutorial didnt mention anything about creating a package manifest etc (https://umbraco.com/blog/deep-dive-block-grid-editor-part-1/) so maybe i am doing that wrong? secondly, from the screen shot above, are you saying that the html file i have in there is not supported until 14.2? https://cdn.discordapp.com/attachments/1267426827073355826/1267436532919173223/image.png?ex=66a8c7c1&is=66a77641&hm=4883a8d8f43a6f6aa0f74e4a042f38c35d5914f996425e055d6126f03db3c178&
forgive me mate, if im being a total nood right now lol
r
Yes that's correct. The blog post is outdated, and the 'Custom view' field will be removed as it's all got to be configured in front end code
You won't be able to add a HTML file there any more
m
ahh šŸ’© . so in reality theres no way of achieving what i want until 14.2?
r
Correct, unfortunately!
If you need them right now, you'd be better off using v13.latest
d
@mehdimiah_ I also have a V14 with block grid ready to go and having used @rickbutterfield package in V13 am happy to wait a few weeks.
m
wonder if there is a pre-release i could possibly use? i also noticed above you sent this - https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/main/src/packages/block/custom-view/manifest.ts if i were to try copy this and do this. as you mentioned lack of control, would that mean i woudnt be able to have the rich text rendering its content in the editor and the image rendering the image in the editor? in this case im building somehting headless so the frontend doesnt matter in my case šŸ™‚
This is purely for editor experience, the front end will be handled as im using the delivery api
k
@mehdimiah_ if you "want it now", I've released https://marketplace.umbraco.com/package/knowit.umbraco.instantblockpreview which does a lot of the same things as @rickbutterfield's package.
m
hey kaspar! hope i dont sound like a toddler crying for a toy! lol work pressures šŸ˜† so i have to try find something to just preview as soon as possible. thanks for the link! ill most definitely take a look!
k
As Rick correctly states, the "advanced" tab does nothing, and currently extension-wise we can't chose what we are replacing with custom content, so my package takes control of all blocks per default. You can limit this by setting "enableFor": ["alias1","alias2","etc."] in the config
If it can't make a preview, or you're using "enableFor", it will instead output something that looks a lot like the default behavior of Umbraco
m
k
For v14 you need version 2.0.9
how did you install it ?
m
via nuget package manager
k
umbraco thinks it's v1.0 because it's reporting the version of the frontend code šŸ™‚ Ok, that's weird. I've tested it today on a blank umbraco install
anything in your dev console ?
and importantly, do you have any view files for it to consume ? For an element name "MyElement" it will expect to find /views/partials/blockgrid/components/myElement.cshtml unless you configure another path
m
nothing in the console no, But no i do not have any views. That probably is the issue. my mistake i wasnt certain on how the package is meant to work. does it use the razor to render the preview content?
k
Yeah - it renders your razor views and inserts them
m
oh right thats cool as heck, so renders the view into the editor preview?
k
what you're seeing is the app defaulting back to default behavior because it can't find any views to render. Then it outputs html that resembles the default behavior of Umbraco
yes
It will expect to find a view with something like this
Copy code
csharp
@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem<Paragraph>>

<div>
    @Model.Content.Text
</div>
so it can map your model on to it
m
Ok my mistake, let me add a view and go from there šŸ™‚ i usually work with blocklists etc so grids are new to me šŸ™‚
Sweet!! thanks
k
https://github.com/kasparboelkjeldsen/Knowit.Umbraco.InstantBlockPreview/tree/main/Knowit.Umbraco.Bellissima.InstantBlockPreview this one specifically for v14 - which, admitittedly is a bit of a mess as I'm still figuring it all out šŸ™‚
m
Top g! thanks man! ill defo take a look at this. just one more and ill leave you alone lol, rendering images
@using TheLogicalChoice.DEP.ContentModels @using Umbraco.Cms.Core.Models.Blocks @using Umbraco.Cms.Web.Common.PublishedModels; @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem>
do i need to do some css magic to make it respect the container it is in?
k
It comes with zero styling, so yes šŸ™‚ Easiest solution is probably to have your own style sheet and use the "injections" property in the configuration.
"Knowit.Umbraco.InstantBlockPreview": { "injections": [""] } something like this Injections basically are just "lines you'd like included in the begigging of your view"
or you coud litterally inline it "injections": ["img {max-width: 100%}"] would prolly work
Or if it's specific to the indiviaul view, you can use this in your cshtml to have some css only execute in the backoffice @if (ViewBag.blockPreview != null) { I am only visible in backoffice and this is my id @ViewBag.assignedContentId }
m
damn man you seem to "Knowit" all lol. bro thank you so much. you've helped me out a million.
k
Happy you can use it šŸ™‚
I believe you are the first one to use this in v14 besides my own tests šŸ˜„
h
I'll be giving it a try later šŸ™‚
m
it works pal, give me a ping if you need a hand too šŸ™‚
have you ever used webcomponents in umbraco? wodnering if we could get it to work in these previews. i meant the element rendering the custom preview is a webcomponent so i guess im asking if it is possible to do it in the view
h
mmm, doesn't appear to do anything for me at all šŸ™
k
Any console errors ? Or any 500 errors in the network tab ?
h
No errors at all
k
version 2.0.9 on 14.1 or newer ?
and you have your razor views set up ?
h
yes to all šŸ™‚
k
Well that is very weird. After you've build, has it created a folder with the files for it in app_plugins/ ? Like, either it shouldn't load correctly, and then there would be errors in the console in dev tools, or it loads and something fails during render, where you should at least be able to see the api being called in the network tab. Nothing happening suggests it's not installed correctly :/
h
Yes it creates the app_plugins folder and files, I'll check to see if it's calling the api and let you know
k
specifically you should see post calls to "/api/blockpreview" in your network tab in devtools when you look at a document with a blockgrid or blocklist on
h
it appears to be calling the api
k
What's the api returning ?
h
it just appears to return {"html":"blockbeam"}
k
Ok, that means it can't find your view, or if it can, that it can't render it. It's telling the frontend to fall back to the default html - I should add some logging so we could find it in your logs what went wrong, but that's sadly not there right now. Structure looks right for the views.
Are you using AssignedContent in your view ?
h
No, here is an example view (richTextBlock)
Copy code
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<RichTextBlock,SectionSettings>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels
@{
    string cssClass = "";
    if (Model.Settings != null && Model.Settings.HasValue("sectionClass"))
    {
        cssClass = Model.Settings.Value<string>("sectionClass");
    }

}
@if (ViewBag.blockPreview != null)
{
    <p style="color:red">I am only visible in backoffice and this is my id @ViewBag.assignedContentId</p>
}
<div class="rich-text @cssClass">@Model.Content.RichText</div>
k
Gonna guess it might be because of the settings - haven't played around a lot with those. I'll try to set up something similar today and see if I can figure it out šŸ™‚ And also make a debug option in the config so it will log rendering errors
h
I'll see if I have any blocks without settings and see if that gets rendered
OK, it looks like it is the settings, I tried with just headlineBlock which has no settings and that previews fine.
k
Alright, I'll take a look a little later today and see if I can get it up and running with Settings šŸ™‚ Good find
@huwred try giving 2.0.10 a spin and see if it helps with your settings šŸ™‚
m
k
no - instant block preview is my first v14 plugin
h
That's a lot better, although it still has problems with some of my blocks that are used for layout and then have nested blocks in the areas. They just display a header which means you can't actually add any content in the areas šŸ™‚
The Two column layout should have two areas you can drop content in. (maybe it is because the twocolumn layout element has no content?)
k
You are hitting the next problem I've been trying to fix. Take a look at Area replace in the readme about configuration
V14 doesn't have all the features needed to make everything work, so nested grids like that won't be perfect until 14.2 or later, but it should get things working
h
Ah, that's a pain since 99% of my blocks are nested šŸ¤£
k
Well, 14.2 comes soon, we should be able to do more fine grained block control there šŸ™‚
d
I have just installed to test - this is with no configuration. Like @User I use layouts blocks and feature blocks within them https://cdn.discordapp.com/attachments/1267426827073355826/1267824659487789087/image.png?ex=66aa3139&is=66a8dfb9&hm=61df568f5d772d667c914e476961880b87f01b754e8cef849941b1598284120a&
k
I will take a crack at solving this better tomorrow, there should be some way I can make areas behave, even without the completed support from Umbraco, but you're right, elements used as layouts won't work right now. It is slightly annoying, I can detect areas, and add in the which will then make the areas work, but the nested elements inside the areas will then revert back to normal Umbraco behavior and not use the webcomponent I've made, so I'll need to make some kind of inbetween solution for it. We tend not to use layouts like that here, and instead rely on sizing options for the individual elements for the sites we have that use blockgrid, so I've note had a mind to look too deeply into that.
Thanks for trying it out @Dean Leigh
d
In this example I have recreated UmBootstrap from V13. I made UmBootstrap to follow the principles and existing examples from HQ which I was involved in consulting on in the early days. Basically they are based on CSS Grid (and many CSS frameworks), where a grid is created and the width of the columns is a divisor of the total e.g. 12 column grid can consist of col-8 + col-4. Unfortunately HQ ran out of time to make them responsive but I have done so by placing utility classes in the area labels which works fine for now. The principles of CSS grid allow you to move content around in the grid in many ways which makes CSS Grid and Umbraco Block Grid exceptionally flexible when used this way.
h
Might be worth looking at Ricks v14 dev branch, that seems to be OK with nested blocks, but I was having issues with a couple of my blocks so thought I would give yours a spin. I have a feeling that the issue I was getting with Rick's is an Umbraco issue. Any block I have that uses a content picker errors when trying to use the nodeId from the content
r
Whatever gets rendered by 
<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
should then just be a normal Umbraco rendering which uses whatever custom view is specified, I think. Let me double check if I had to change anything there
Nope I'm using the same to render blocks within areas
Although I did have some fun with nested blocks, where the model wasn't being passed correctly so I had to do some magic with deserializing it to the correct object
h
I wonder if that is what is causing my issue, if I have a content picker, the model is returned with an error about the nodeid(the picker) I'll fire it up later and check what the error was exactly
d
Is this Resolved? I think it's worth keeping open as the next update is quite soon
m
i just put it as resolved, as i got the answer to my question, lol i can change it back?
d
I think it is worth keeping open yes please
k
I'm ready to fight again šŸ™‚ Nesting works, including silly multiple layers. Just gonna have a look at using a contentpicker in an element type before publishing 2.0.11 šŸ™‚ https://cdn.discordapp.com/attachments/1267426827073355826/1268136718876414014/image.png?ex=66ab53da&is=66aa025a&hm=166c8b5b506514033a6c76a4368ab85375743053ceb84d05fa107094e704c4ec&
h
I think the picker may be an underlying Umbraco issue, in the blockitem the picker is stored as image below In Rick's code when it attempts to serialize this it errors https://cdn.discordapp.com/attachments/1267426827073355826/1268137707104895057/image.png?ex=66ab54c6&is=66aa0346&hm=70f2ae1ad6f21811f5230c2c538a5fbadcbc284fe28fac6a9f2615830dacb236&
error 
type: "document" is not a valid UDI
k
Getting the same, however it looks salvageable
Copy code
json
"contentData":[
      {
         "contentTypeKey":"7515a4bb-4fda-4d3e-b8aa-e7e8e5886f55",
         "udi":"umb://element/2909a8f8b97547759bf53e5821be1fd1",
         "picker":[
            {
               "type":"document",
               "unique":"ffa80e93-eaa0-4f39-8b13-e2da8bfb3aff"
            }
         ]
      }
   ],
this is what the frontend sends in
Copy code
json
"contentData":[
      {
         "contentTypeKey":"7515a4bb-4fda-4d3e-b8aa-e7e8e5886f55",
         "udi":"umb://element/2909a8f8b97547759bf53e5821be1fd1",
         "picker":"umb://document/ffa80e93eaa04f398b13e2da8bfb3aff"
      }
   ],
and this is what umbraco expects
should be able to fix that "in transit"
@huwred @Dean Leigh Alright, v.2.0.11 is out - it requires this in your config
Copy code
json
"Knowit.Umbraco.InstantBlockPreview": {
  "areaReplace": true
}
And it requires you insert "@ViewBag.renderGridAreaSlots" in your Area-views where you want the area to be rendered
Copy code
razor
@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>

<div>
    @await Html.GetBlockGridItemAreasHtmlAsync(Model)
    @ViewBag.renderGridAreaSlots
</div>
Works with content picker Tested with this dotnet new install Umbraco.Templates::14.1.1 --force # Create solution/project dotnet new sln --name "MySolution" dotnet new umbraco --force -n "MyProject" --friendly-name "Administrator" --email "admin@example.com" --password "1234567890" --development-database-type SQLite dotnet sln add "MyProject" #Add Packages dotnet add "MyProject" package Knowit.Umbraco.InstantBlockPreview
h
I'll give it a spin this afternoon šŸ™‚
d
Bit busy with end of month stuff today but will try a.s.a.p.
h
@Kaspar Boel Kjeldsen what is the format for the injections object, doesn't seem to work for me, just outputs a string at the top of the block https://cdn.discordapp.com/attachments/1267426827073355826/1268165834333884416/image.png?ex=66ab6ef8&is=66aa1d78&hm=0117e50102223aaea13e57289e84ae45784e373195f21cc90926ed9e574440fe&
k
not really any format, it litterally inserts what you write, so if you want a script you'd write if you want a stylesheet you write
It just gets prepended on the render, whatever lines are in there
h
ah ok, it needs the wrappers, thanks šŸ‘
k
yup šŸ™‚
h
k
Oooh boy I've baby brained hard, sorry not getting much sleep right now. Not that that it's a solution, I'll fix it now, but I believe it will work if you litterally call your picker "picker" šŸ˜„
Publishing 2.0.12 asap that should allow you to name your picker whatever you want šŸ˜‰
h
Ok, no problem with the picker for now šŸ™‚ It doesn't appear to be loading the css files however, I added 
"injections": [  "<link href=\"~/css/myblockgridlayout.css\" rel=\"stylesheet\">", "<link href=\"~/css/prism.css\" rel=\"stylesheet\">" ],
but doesn't seem to be using them
k
hmm, other people have used that part succesfully. Can you check the api response to see if it's added correctly to the html ?
oh, I know why. Skip the "~" in the beginning. It's not parsing razor/cshtml at that point anymore, just plain html
h
yep, that sorted the css šŸ™‚
k
good. You should be able now to update to .12 and see if the picker works too šŸ˜„
h
k
Amazing
h
so far so good šŸ™‚ It loads the css files now, but does not appear to load any js files which are in the inclusions object
"injections": [ "<script src=\"/scripts/prism.js\"></script>",
k
That might be a web component/shadowdom thing. Haven't tested that on 14. Will investigate šŸ™‚ really a lovely time with this fast test-loop ! šŸ™‚
h
glad to be helping out šŸ˜„
a
Iā€™m following this thread because we use an in-house block preview system that we will have to rewrite for 14. It functions very similarly to both solutions mentioned here.
k
looks like I'll have to do the same dance as I had to with Angular - ie. scripts aren't executed as a safety feature, so lets break that because we decide, dammit.
@huwred - 2.1.0 should execute scripts šŸ™‚
h
I'll give it a spin
The only difference I see is that I now get a 
SyntaxError: "undefined" is not valid JSON
on pages with the blockgrid
It is loading the js files, I just can't accomplish what I needed yet as the elements are in the shadow dom and I have no idea how to work with them šŸ¤£
d
I don't think I have ever checked a thread so often!
h
had a little play and managed to get the javascript working, @Kaspar Boel Kjeldsen would it be possible to add something to the config so that it only injects certain css/js into a specific block rather than in every block? https://cdn.discordapp.com/attachments/1267426827073355826/1268659387216560269/image.png?ex=66ad3aa0&is=66abe920&hm=a3b323a0a4e14bc0ba3a0a1d3d5ef5e60ae64ead55a998b21be04fe07c9c19a6&
k
I suppose it would - though you could also utilize the ViewBag.blockPreview for that, as the effect would be the same
Copy code
razor
@if (ViewBag.blockPreview != null)
{
  <script src="~/mysuperspecificscrip.js" />
}
and then just write it into the view
h
Ok, I'll give that a try šŸ™‚
k
"SyntaxError: "undefined" is not valid JSON on pages with the blockgrid" will be fixed in 2.1.1, it doesn't really prevent anything from working, but of course that error should be handled. occurs when there isn't any current data for the block (ie. the block is empty and hasn't gotten any data yet)
h
yep that worked šŸ™‚
@Kaspar Boel Kjeldsen still getting some issues with settings values. I have a number slider, but the value when previewing is always 0 https://cdn.discordapp.com/attachments/1267426827073355826/1268879472346796043/image.png?ex=66ae0798&is=66acb618&hm=db5f2bd8b1cd03ba35c001bc17bead3a6604df74f5b883c6b9648079c942e917&
k
I'll take a look monday šŸ™‚
h
No rush for me, just an observation, other than that everything looking pretty good in preview mode. Have a great weekend šŸ˜„ https://cdn.discordapp.com/attachments/1267426827073355826/1268898631994572901/image.png?ex=66ae1970&is=66acc7f0&hm=c124175069561c5a385dcfc50553e17ffaf3bad9243b1d1fd60ce27145611430&
k
@huwred 2.1.1 should also eat sliders now, and do proper conversions for settings items as well as content items šŸ™‚
h
Cool, will give it a whirl later, just having a battle with Media menu šŸ˜„
@Kaspar Boel Kjeldsen works great šŸ‘
m
h
Yes, that should work
m
@huwred i dont understand why the "add content" buttons are not rendering. there should be 3 areas in this block. unless this is something disabled in u14?
h
did you add the setting in appsettings, and add
Copy code
@ViewBag.renderGridAreaSlots
m
woah wait theres a setting to enable areas? (my first time working with areas) i thought you just need to do this. are you able to show me what i need to add? https://cdn.discordapp.com/attachments/1267426827073355826/1271434076590706771/image.png?ex=66b752c1&is=66b60141&hm=7e9164f2cdc30ac7cc8a05aadbc6e61434235b938df5be152e4329c7773b1348&
h
m
h
what does your column layout template look like?
m
h
No your actual threeColumnLayout.cshtml file you should have created one in Views\Partials\blockgrid\components
m
h
Can't see any reason for it not working TBH, did you add the appsettings section?
Copy code
"Knowit.Umbraco.InstantBlockPreview": {
    "areaReplace": "true"
  }
k
@huwred @mehdimiah_ no idea if this is the issue, but I expect "areaReplace" to be a boolean, not sure passing "true" as a string in the config gets parsed correctly? I notice your picture has "true" instead of true
Copy code
json
"Knowit.Umbraco.InstantBlockPreview": {
  "areaReplace": true
}
otherwise, you can try to enable debugging with
Copy code
json
"Knowit.Umbraco.InstantBlockPreview": {
  "debug": true
}
Then you should find rendering errors (which is looks like) in your logs in Umbraco. The plugin defaults to rendering something that looks like a default block beam in Umbraco when something fails - admittedly that looks a bit silly for an area.
In other news, Instant Block Preview also looks to be ready for 14.2
m
@Kaspar Boel Kjeldsen hey pal, Thanks for messaging me!. So changing "true" to a boolean looked so promising but it didnt work. But also, enabling debug doesnt throw any errors in the logs (i assume the errors would show in the umbraco logs in the cms back end?) so im fearing the worst lol that areas are not working for umbraco 14 yet.
@huwred hey pal, have you manages to get areas working in umbraco 14 at all?
k
@mehdimiah_ we definetly have areas working - as long as you are on Umbraco 14.1 or newer and am using version 2.1.2 of my package
h
yes, areas are working
k
m
im on 14.1.0 and im using 2.1.2
hmm, ive set it up incorrectly, but not sure where lol šŸ§
k
Copy code
json
{
  "$schema": "appsettings-schema.json",
  "Serilog": {
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Warning",
        "Microsoft.Hosting.Lifetime": "Information",
        "System": "Warning"
      }
    }
  },
  "Umbraco": {
    "CMS": {
      "ModelsBuilder": { "ModelsMode": "SourceCodeAuto" },
      "Global": {
        "Id": "6bdde895-2aee-465d-8f2e-1fc79309c6ee",
        "SanitizeTinyMce": true
      },
      "Content": {
        "AllowEditInvariantFromNonDefault": true,
        "ContentVersionCleanupPolicy": {
          "EnableCleanup": true
        }
      },
      "Unattended": {
        "UpgradeUnattended": true
      },
      "Security": {
        "AllowConcurrentLogins": false
      }
    }
  },
  "Knowit.Umbraco.InstantBlockPreview": {
    "areaReplace": true
  }
}
This is the minimal config of Umbraco 14.1 I'm using to test it
m
@Kaspar Boel Kjeldsen you're gonna kill me šŸ˜† but i was just clicking around and realised it didnt "allow in areas" for the blocks lol so the "add content" button just wasn't rendering at all... i just need to render the block content now inside of the areas. would that be handled by the view for the "image block" or by the view for the "3 col page" https://cdn.discordapp.com/attachments/1267426827073355826/1272475208321728613/image.png?ex=66bb1c63&is=66b9cae3&hm=362b31e5ceebb4ad0214cee420b6f1b83ec0547be907afad4f9f1b4ea844e85b&
k
Nope, just happy you got it working! šŸ˜„
it should be handled by the view for the image block
390 Views
PreviousNext
Powered by